<template>
  <PageWrapper>
    <n-card :bordered="false" class="mb-3 proCard">
      <n-space align="center">
        <n-input-group style="width: 1500px">
          <div style="margin-left: 10px !important;display: flex;align-items: center;">
              <n-input
              style="width: 100%;margin-left: 20px;"
              v-model:value="params.danhao"
              clearable
              placeholder="请输入订单号"
              @keyup.enter="reloadTable"
              />
              <n-input
              style="width: 100%;margin-left: 20px;"
              v-model:value="params.charge_id"
              clearable
              placeholder="请输入设备号"
              @keyup.enter="reloadTable"
              />
              <n-input
              style="width: 100%;margin-left: 20px;"
              v-model:value="params.user_id"
              clearable
              placeholder="请输入用户id号"
              @keyup.enter="reloadTable"
              />
              <n-input
              style="width: 100%;margin-left: 20px;"
              v-model:value="params.tell"
              clearable
              placeholder="请输入手机号"
              @keyup.enter="reloadTable"
              />
              <n-input
              style="width: 100%;margin-left: 20px;"
              v-model:value="params.wdtitle"
              clearable
              placeholder="请输入网点名称"
              @keyup.enter="reloadTable"
              />
              <n-input
              style="width: 100%;margin-left: 20px;"
              v-model:value="params.dizhi"
              clearable
              placeholder="请输入网点地址"
              @keyup.enter="reloadTable"
              />
          </div>
        </n-input-group>
        <n-input-group style="width: 1500px">
          <div style="margin-left: 10px !important;display: flex;align-items: center;">
            <n-input
            style="width: 100%;margin-left: 20px;"
            v-model:value="params.agent_name"
            clearable
            placeholder="请输入代理商名称"
            @keyup.enter="reloadTable"
            />
            <n-input
            style="width: 100%;margin-left: 20px;"
            v-model:value="params.bussiness_name"
            clearable
            placeholder="请输入商户名称"
            @keyup.enter="reloadTable"
            />
          </div>
          <div style="margin-left: 20px !important;display: flex;align-items: center;">
              <n-select v-model:value="params.status" placeholder="请选择订单状态" style="width: 200px;" :options="options" clearable />
          </div>
          <div style="margin-left: 20px !important;display: flex;align-items: center;">
                <n-select v-model:value="params.pingtai" placeholder="请选择平台" style="width: 200px;" :options="optionspt" clearable />
            </div>
          <div style="margin-left: 20px !important;display: flex;align-items: center;">
            <n-date-picker v-model:value="range" type="daterange"  @update:value="onChange4" clearable />
          </div>
          <n-button type="primary" style="margin-left: 40px !important;" @click="reloadTable">
            <template #icon>
              <n-icon>
                <SearchOutlined />
              </n-icon>
            </template>
            查询
          </n-button>
        </n-input-group>
      </n-space>
    </n-card>
    <n-card :bordered="false" class="proCard">
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="basicTableRef"
        :actionColumn="actionColumn"
        virtual-scroll
      >
      </BasicTable>
    </n-card>

    <!-- 详情 -->
    <n-modal v-model:show="showModal">
      <n-card
        style="width: 1000px"
        title="订单详情"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <div class="light-green">
            <div class="title">充电信息</div>
            <div class="nr">
              <span>门店名称：{{roleData.wdtitle}}</span>
              <span>门店地址：{{roleData.dizhi}}</span>
              <span>设备号：{{roleData.charge_number}}</span>
              <span>端口号：{{roleData.duankou}}</span>
              <span>代理商名称：{{roleData.agent_name}}</span>
              <span>商户名称：{{roleData.bussiness_name}}</span>
              <span>收费类型：{{roleData.leixing}}</span>
              <span>平台类型：{{roleData.pingtai}}</span>
            </div>
          </div>
        </n-gi>
        <n-gi>
          <div class="light-green">
            <div class="title">费用信息</div>
            <div class="nr">
              <span>订单编号：{{roleData.danhao}}</span>
              <span style="color: red">订单状态：{{roleData.status}}</span>
              <span>累计电能：{{roleData.energy}}W.MIN</span>
              <span>充电时长：{{roleData.out_time}}</span>
              <span>开始时间：{{roleData.sdate}}</span>
              <span>结束时间：{{roleData.edate}}</span>
              <span>支付金额：{{roleData.money}}</span>
            </div>
          </div>
        </n-gi>
        <n-gi>
          <div class="light-green">
            <div class="title">用户信息</div>
            <div class="nr">
              <span>用户昵称：{{roleData.username}}</span>
              <span style="color: brown; text-decoration-line: underline; cursor: pointer;" @click="huiyuanUrl">会员ID：{{roleData.member_card}}</span>
            </div>
          </div>
        </n-gi>
        <n-gi>
          <div class="light-green">
            <div class="title">分成明细</div>
            <div class="nr">
              <span>平台：{{roleData.platform_money}}元</span>
              <span>代理商：{{roleData.agent_money}}元</span>
              <span>商户：{{roleData.bussiness_money}}元</span>
            </div>
          </div>
        </n-gi>
      </n-grid>
      </n-card>
    </n-modal>

  </PageWrapper>
</template>

<script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
  import { SearchOutlined } from '@vicons/antd';
  import { columns } from './columns';
  import { silunlist,orderDel,info } from '@/api/order/index';

  const message = useMessage();
  const basicTableRef = ref();
  const tableData = ref();
  const roleData = ref({
    wdtitle: '',
    dizhi: '',
    charge_number: '',
    duankou: '',
    agent_name: '',
    bussiness_name: '',
    leixing: '',
    danhao: '',
    status: '',
    energy: '',
    out_time: '',
    sdate: '',
    edate: '',
    money: '', 
    username: '',
    user_id: '',
    platform_money: '',
    agent_money: '',
    bussiness_money: '',
    member_card: '',
    pingtai: '',
  });
  const range = ref<[number, number]>();
  const showModal = ref(false);

  const params = reactive({
    danhao: '',
    charge_id: '',
    user_id: '',
    tell: '',
    wdtitle: '',
    dizhi: '',
    sdate: '',
    edate: '',
    agent_name: '',
    bussiness_name: '',
    status: null,
    pingtai: null,
  });

  const options = ref([
    {
      label: "未支付",
      value: 1,
    },
    {
      label: '已支付',
      value: 2
    },
    {
      label: '正在充电',
      value: 3
    },
    {
      label: '预支付',
      value: 4
    },
    {
      label: '已完成',
      value: 5
    },
    {
      label: '放电失败',
      value: 6
    },
    {
      label: '已取消',
      value: 7
    },
    {
      label: '已退款',
      value: 8
    }
  ])

  const optionspt = ref([
      {
        label: "微信小程序",
        value: 1,
      },
      {
        label: '抖音小程序',
        value: 2
      },
      {
        label: '支付宝小程序',
        value: 3
      }
    ])

  // 操作
  const actionColumn: BasicColumn = reactive({
    width: 150,
    title: '操作',
    key: 'action',
    fixed: 'right',
    align: 'center',
    render(record) {
      return h(TableAction as any, {
        actions: [
          {
            label: '查看详情',
            onClick: handleEdit.bind(null, record),
          }, {
            label: '删除',
            onPositiveClick: handleDelete.bind(null, record),
            isConfirm: true,
            confirmContent: '您确定要删除吗？',
          },
        ],
      });
    },
  });

  //列表数据
  const loadDataTable = async (res) => {
    const result = await silunlist({ ...params, ...res });
    tableData.value = result.list;
    return result;
  };

  // 编辑
  function handleEdit(record: Recordable) {
    let id = record.id;

    info({ id: id }).then((res) => {
      roleData.value = res;
      showModal.value = true;
    });
  }
  
  //删除
  function handleDelete(record: Recordable) {
    orderDel({ id: record.id }).then(() => {
      message.success('删除成功');
      reloadTable();
    });
  }

  //加载表格
  function reloadTable() {
    basicTableRef.value.reload();
  }

  function onChange4(v: number){
    if(v != null){
      params.sdate = v[0];
      params.edate = v[1];
    }else{
      params.sdate = '';
      params.edate = '';
    }
  }

  function huiyuanUrl(){
    location.href = '/users/weixin'
  }

</script>

<style lang="less" scoped>
  .light-green{
    margin-bottom: 30px;

    .title{
      margin-bottom: 20px;
      font-size: 18px;
    }

    .nr{

      span{
        display: block;
        margin-bottom: 6px;
      }
    }
  }


</style>
